<script setup>
import { CopyDocument } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import { ref, onMounted } from 'vue'
async function getCurrentTab() {
  let queryOptions = { active: true, currentWindow: true };
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
}

function handleRefresh() {
  // chrome.tabs.reload(getCurrentTab().id);
  if (chrome && chrome.runtime) {
    chrome.runtime.sendMessage({
      source: "refresh",
    });
  }
}

function handleClear() {
  // chrome.tabs.reload(getCurrentTab().id);
  if (chrome && chrome.runtime) {
    chrome.runtime.sendMessage({
      source: "clear",
    });
  }
}

function copyText(text) {
  let textarea_dom = document.createElement('textarea');
  document.body.appendChild(textarea_dom);
  textarea_dom.value = text;
  textarea_dom.select();
  document.execCommand("Copy");
  ElMessage({
    message: '已复制！',
    type: 'success',
  })
  document.body.removeChild(textarea_dom);
}

let dataList = ref([]);

onMounted(() => {
  if (chrome && chrome.runtime) {
    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
      if (message.source === "devtools-new") {
        dataList.value.push(message.data);
      } else if (message.source === "devtools-refresh") {
        dataList.value = message?.data ?? []
      }
      // else if (message.source === "devtools-clear") {
      //   dataList.value = []
      // }
    })
  }

  //   const channel = chrome.runtime.connect(null, {
  //     name: chrome.devtools.inspectedWindow.tabId.toString(),
  // });

})

const formatJson = (data) => {
  try {
    return JSON.parse(data)
    // return JSON.stringify(JSON.parse(data), null, 2)
  } catch (error) {
    return data
  }
}

function ellipsis(value, vlength = 100) {
  if (!value) {
    return "";
  }
  if (typeof value === 'string' && value.length > vlength) {
    return value.slice(0, vlength) + '...'
  }
  return value
}

</script>

<template>
  <div class="app-page">
    <div class="operate-wrapper">
      <el-button size="mini" type="primary" @click="handleRefresh">刷新</el-button>
      <el-button size="mini" type="danger" @click="handleClear">清空</el-button>
    </div>

    <!-- <el-auto-resizer>
      <template #default="{ height, width }">
        <el-table-v2 :columns="columns" :data="dataList" :width="width" :height="height" fixed />
      </template>
    </el-auto-resizer> -->
    <el-table :data="dataList" border style="width: 100%;height: 100%;">
      <el-table-column type="expand">
        <template #default="props">
          <div class="decry-body">
            <h3>响应数据</h3>
            <el-row class="t-header">
              <el-col :span="8">原始数据</el-col>
              <el-col :span="16">解密数据</el-col>
            </el-row>
            <el-row class="t-body">
              <el-col :span="8">
                <div class="operation-wrapper">
                  <el-button size="small" :icon="CopyDocument" type="primary"
                    @click="copyText(props.row.rawData)">复制</el-button>
                </div>
                <div>
                  {{ ellipsis(props.row.rawData) }}
                </div>
              </el-col>
              <el-col :span="16">
                <div class="operation-wrapper">
                  <el-button size="small" :icon="CopyDocument" type="primary"
                    @click="copyText(props.row.decryData)">复制</el-button>
                </div>
                <vue-json-pretty showIcon showSelectController :deep="2" selectableType="single"
                  :showSelectController="true" :highlightMouseoverNode="true" path="root"
                  :data="formatJson(props.row.decryData)"></vue-json-pretty>
              </el-col>
            </el-row>

            <!-- <el-table :data="[{ rawData: props.row.rawData, decryData: props.row.decryData }]" :border="true">
              <el-table-column label="原始数据" prop="rawData" width="300">
                <template #default="scope">
                  <div>
                    {{ ellipsis(scope.row.rawData) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="解密数据" prop="decryData">
                <template #default="scope">
                  <div class="operation-wrapper">
                    <el-button size="small" :icon="CopyDocument" type="primary"
                      @click="copyText(scope.row.decryData)">复制</el-button>
                  </div>
                  <vue-json-pretty showIcon showSelectController :deep="2" selectableType="single"
                    :showSelectController="true" :highlightMouseoverNode="true" path="root"
                    :data="formatJson(scope.row.decryData)"></vue-json-pretty>
                </template>
              </el-table-column>
            </el-table> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="method" label="Method" />
    </el-table>
  </div>
</template>

<style scoped>
.app-page {
  text-align: left;
}

.operate-wrapper {
  margin-bottom: 12px;
}

.decry-body {
  position: relative;
  padding: 10px;
}

.operation-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.t-header {
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;

}

.t-body {
  border-left: 1px solid #ebeef5;
}

.t-header .el-col {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.t-body .el-col,
.t-header .el-col {
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  word-wrap: break-word;
  padding: 10px
}
</style>
